<template>
  <div class="treeForm">
    <slot name="btn-slot"></slot>
    <!-- 按条件搜索 -->
    <div class="tree-filter">
      <el-input placeholder="请输入" v-model="filterText" suffix-icon="el-icon-search"></el-input>
    </div>
    <!-- 树型结构 -->
    <el-tree class="filter-tree tree-content" :data="treeData" :props="defaultProps" ref="tree"
      :filter-node-method="filterNode">
      <span class="custom-tree-node" slot-scope="{ node, data }" @contextmenu.prevent="openMenu($event, data)">
        <i v-if="!data.id"
          :class="['expanded', { 'el-icon-plus': !node.expanded, 'el-icon-minus': node.expanded }]"></i>
        <icon-svg v-else style="font-size: 18px" iconClass="icon-yuanhuise"></icon-svg>
        <span :class="['node-ellips', { 'node-label': data.id }]" @click="handleNodeClick($event, data, node)">{{
        node.label }}</span>
        <div class="node-btn" v-if="data.id && itmeRootName == 'standItem'">
          <icon-svg :class="{ 'bt-lock': data.isLock }" style="font-size: 20px;"
            :iconClass="data.isLock ? 'bt-lock' : 'bt-unlock'" @click="changeLock(data)"></icon-svg>
        </div>
      </span>
    </el-tree>
    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextMenu">
      <li @click="addRule(1)" style="border-bottom: 1px solid #dadce0;margin: 0px;padding-bottom: 8px;">修改</li>
      <li @click="addRule(2)">删除</li>
    </ul>
  </div>

</template>

<script>
import { getAusAsstntStndrdItemListApi } from '@/api/setting/maintain/codeMapMaintain.js'

export default {
  name: 'asstntStndrdItems',
  props: ['manual', 'itmeRootName'],
  data() {
    return {
      currentRow: {},
      addRuleVisible: false,
      visible: false,
      top: '',
      left: '',
      filterText: '',
      // AI质询体检项目
      treeData: [{
        label: 'AI质询体检项目',
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentId: null
    }
  },
  created() {
    this.getProjectLibraryList()
  },
  methods: {
    // 点击右键菜单时触发
    addRule(type) {
      if (type == 1) {
        //修改规则
        this.$emit('editOrDeleteAction', this.currentRow)
        this.closeMenu()

      } else {
        this.$emit('stndrdItemDelete', this.currentRow)
        // 删除规则
        this.closeMenu()
      }
    },
    // 关闭右键菜单
    closeMenu() {
      this.visible = false;
    },
    // 右键打开菜单
    openMenu(e, data) {
      if(this.itmeRootName == 'standItem'){
        this.currentRow = data;
      let x = e.clientX;
      let y = e.clientY;
      this.top = y;
      this.left = x;
      this.visible = true;
      }
    },
    getProjectLibraryList(index = 0) {
      getAusAsstntStndrdItemListApi().then(res => {
        this.treeData[0].children = res.data || [];
        if (this.itmeRootName == 'health') {
          for (let i = 0; i < this.treeData[0].children.length; i++) {
            var healthObj = res.data[i]
            healthObj.label = "健康建议规则"
            res.data[i] = {}
            res.data[i].label = healthObj.itemsCode ? healthObj.itemsCode + ' ' + healthObj.itemsName : healthObj.itemsName
            res.data[i].children = [{
              children: [],
              ...healthObj,
            }]
          }
        } else if (this.itmeRootName == 'rule') {
          for (let i = 0; i < this.treeData[0].children.length; i++) {
            var healthObj1 = res.data[i]
            var healthObj2 = res.data[i]
            var healthObj3 = res.data[i]
            res.data[i] = {}
            res.data[i].label = healthObj1.itemsCode ? healthObj1.itemsCode + ' ' + healthObj1.itemsName : healthObj1.itemsName
            res.data[i].children = [{ children: [], ...healthObj1, label: "体检分级规则", ruleType: '1' }, { children: [], ...healthObj2, label: "特殊判断规则", ruleType: '2' }, { children: [], ...healthObj3, label: "核保结论规则", ruleType: '3' }]
          }
        }
        else {
          this.treeData[0].children.forEach(item => {
            item.label = item.itemsCode ? item.itemsCode + ' ' + item.itemsName : item.itemsName
          })
        }
        // this.clickFirstNode(index)
      })
    },
    filterNode(value, data, node) {
      let parentNode = node.parent // 父级node
      let labels = [node.label] // 当前node的名字
      let level = 1 // 层级
      while (level < node.level) {
        labels = [...labels, parentNode.label] // 当前node名字，父级node的名字
        parentNode = parentNode.parent
        level++
      }
      return labels.some(d => d.indexOf(value) !== -1)
    },
    handleNodeClick($el, data, node) {
      if (data.id) {
        // if (this.currentId == data.id) return
        document.querySelectorAll('.node-active').forEach(item => item.classList.remove('node-active'))
        $el.target.classList.add('node-active')
        this.currentId = data.id
        this.$emit('queryStandItemTableData', data.id, data.itemsCode, data.isLock, data)
      }
    },
    changeLock(data) {
      let flag = data.isLock ? false : true;
      this.$set(data, 'isLock', flag);
    },
    // 默认选中第一个节点
    clickFirstNode(_index) {
      setTimeout(() => {
        if (document.querySelector('.node-label')) document.querySelectorAll('.node-label')[_index].click()
      }, 0)
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
}
</script>


<style lang="less" scoped>
.contextMenu {
  margin: 0;
  border: 1px solid #dadce0;
  background: #fff;
  z-index: 3000;
  position: fixed;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgb(0 0 0 / 30%);
  text-align: center;
  width: 120px;
}

.contextMenu li {
  cursor: pointer;
  margin: 8px;
}

.contextMenu li:hover {
  color: #68a3fc;
}

.tree-filter {
  padding: 20px 20px 0 20px;
}

/* 树形控件样式 */
/deep/ .el-tree {
  background: #fff !important;
  margin-top: 20px !important;
  padding-top: 0 !important;
}

/deep/ .el-tree-node__content {
  height: 30px;
}

.treeForm {
  width: 350px;
  border: 1px solid #e3dddd;
}

.filter-tree {
  max-height: calc(100vh - 300px);
  overflow: auto;
}

/* .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  } */
.tree-content {
  margin-left: 10px;
}

.expanded {
  font-size: 12px;
  border: 1px solid #808080;
  color: #808080;
}

.node-btn {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.bt-lock {
  margin-left: -3px;
  margin-right: 3px;
}

.node-label {
  display: inline-block;
  padding: 10px 0;
  width: 214px;
}

.node-active {
  color: #83a1f7;
}

.node-ellips {
  margin-left: 14px;
  display: inline-block;
  max-width: 214px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-tree-node {
  display: flex;
  align-items: center;
}

/deep/ .el-tree-node__expand-icon {
  display: none;
}

/deep/ .el-tree-node__content {
  height: 30px;
}

/deep/ .el-tree-node {
  position: relative;
}

/deep/ .tree-content>.el-tree-node:before,
/deep/ .tree-content>.el-tree-node>.el-tree-node__children>.el-tree-node:before {
  content: " ";
  border-left: 1px dashed #4386c6;
  position: absolute;
  bottom: 0px;
  top: 30px;
  left: 8px;
  width: 1px;
  z-index: 98;
}

/deep/ .tree-content>.el-tree-node>.el-tree-node__children>.el-tree-node:before {
  left: 27px;
  bottom: -8px;
  top: 20px;
}
</style>